<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { FuelBunkerTRecord, FuelBunkerTRecordApi, BunkerWithThreeDimension } from "@/api/Bunker";
import { _axios } from '@/utils/request';
import { useRouter } from 'vue-router';
import ThreeItem from "@/components/three/threeItem.vue";
import { getConfigKey } from '@/components/three/config';
const router = useRouter();
const threeRef = ref<{ [key: string]: InstanceType<typeof ThreeItem> | null }>({});
interface InState {
    /** 数据状态 */
    loading: boolean;
    /** 煤堆数据 */
    dataList: FuelBunkerTRecord[];
    /** 间隔加载 */
    dataTime: {
        [key: string]: boolean;
    }
    bunkerthreeUrl: string;
    fileBaseUrl: string;
}
/** 数据 */
let state = ref<InState>({
    loading: false,
    dataList: [],
    dataTime: {},
    bunkerthreeUrl: "",
    fileBaseUrl: ""
})
const coalListData = ref(['1#煤场', '2#煤场', '3#煤场'])
const coalIndex = ref(0)
const apiFuelBunkerTRecord = new FuelBunkerTRecordApi(undefined, _axios())
function clickCoal(index: number) {
    coalIndex.value = index
}

onMounted(() => {
    getConfigKey("threeImgUrl").then(response => {
        state.value.bunkerthreeUrl = response.data;
    });
    getConfigKey("bunkerFileUrl").then(response => {
        state.value.fileBaseUrl = response.data;
    });
    getData();
})

/** 获取煤堆信息 */
function getData() {
    state.value.loading = true;
    apiFuelBunkerTRecord.getAllBunkerData().then(res => {
        state.value.dataList = res.data ?? [];
        res.data?.forEach((item, index) => {
            setTimeout(() => {
                state.value.dataTime[`${item.bunkerId}`] = true;
            }, 3000 * index);
        })
    }).finally(() => {
        state.value.loading = false;
    })
}
function view3D(data: FuelBunkerTRecord) {
    router.push(`/stock/yard?bunkerId=${data.bunkerId}`);
}
</script>
<template>
    <div class="yard_3d_title">
        <h3>三维煤场动态监测系统</h3>
    </div>
    <div class="dimension3d" v-loading="state.loading">
        <el-row>
            <el-col :sm="12" :lg="state.dataList.length > 3 ? 8 : 12" v-for="item in state.dataList" :key="item.bunkerId">
                <div class="three-item" style="height: calc(100vh - 180px); position: relative;" v-loading="!state.dataTime[`${item.bunkerId}`]">
                    <p class="three-btn" @click="view3D(item)">查看{{item.bunkerName}}三维模型</p>
                    <ThreeItem v-if="state.dataTime[`${item.bunkerId}`]" :bunker-id="item.bunkerId" :bunker-no="item.stackNo" :bunkerthree-url="state.bunkerthreeUrl" :file-base-url="state.fileBaseUrl"></ThreeItem>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<style scoped lang="scss">
    .dimension3d {
        width: 100%;
        height: calc(100vh - 170px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #93cef4;
        border: 1px solid #E0E5ED;

        .three-item {
            overflow: hidden;
            padding: 6px;
        }

        p.three-btn {
            position: absolute;
            left: calc(50% - 100px);
            top: 2%;
            bottom: 20px;
            min-width: 155px;
            height: 40px;
            background: #2565c8;
            border-radius: 20px;
            font-weight: 500;
            font-size: 15px;
            color: #FFFFFF;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
    }
</style>